import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import { UserOutlined, BookOutlined, HomeOutlined, CheckSquareOutlined } from '@ant-design/icons';
import { Breadcrumb } from 'antd';

const tabs = [
  { key: '/', label: '首页', icon: <HomeOutlined /> },
  { key: '/courses', label: '课程', icon: <BookOutlined /> },
  { key: '/selected', label: '已选', icon: <CheckSquareOutlined /> },
  { key: '/me', label: '我的', icon: <UserOutlined /> },
];

export default function StudentLayout() {
  const nav = useNavigate();
  const loc = useLocation();
  return (
    <div className="min-h-screen bg-slate-50">
      <div className="h-14 shadow-sm bg-white flex items-center justify-between px-4">
        <Breadcrumb items={[{ title: '选课系统' }, { title: tabs.find(t => t.key === loc.pathname)?.label }]} />
        <div className="text-slate-500">学生账号</div>
      </div>
      <div className="max-w-6xl mx-auto p-4">
        <Outlet />
      </div>
      <div className="fixed left-0 right-0 bottom-0 border-t bg-white">
        <div className="max-w-6xl mx-auto grid grid-cols-4">
          {tabs.map(t => (
            <button
              key={t.key}
              onClick={() => nav(t.key)}
              className={`py-3 flex flex-col items-center ${loc.pathname === t.key ? 'text-blue-600' : 'text-slate-500'}`}
            >
              {t.icon}
              <span className="text-xs mt-1">{t.label}</span>
            </button>
          ))}
        </div>
      </div>
      <div className="h-14" />
    </div>
  );
}


